<template>
  <div style="margin-left: 20px">
    <!--查询条件-->
    <el-form style="margin-top: 10px" :inline="true" :model="outStockVo" ref="outStockVo" class="demo-form-inline">
      <el-form-item label="发放单号" prop="outNum">
        <el-input v-model="outStockVo.outNum" placeholder="发放单号"></el-input>
      </el-form-item>
      <el-form-item label="发放类型" prop="type">
        <el-select v-model="outStockVo.type">
          <el-option label="全部类型" value="null"></el-option>
          <el-option label="政府领取" value="0"></el-option>
          <el-option label="医院领取" value="1"></el-option>
          <el-option label="小区领取" value="2"></el-option>
          <el-option label="个人领取" value="3"></el-option>
          <el-option label="其它领取" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="status">
        <el-select v-model="outStockVo.status">
          <el-option label="已发放" value="0"></el-option>
          <el-option label="回收站" value="1"></el-option>
          <el-option label="待审核" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="resetForm('outStockVo')">重置</el-button>
        <el-button type="success" @click="">发放</el-button>
      </el-form-item>
    </el-form>
    <!--数据展示-->
    <el-table
      v-loading="loading"
      element-loading-text="网抑云时间，拼命加载中！"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="tableData"
      border
      style="width: 100%;">
      <el-table-column
        prop="id"
        label="#"
        width="70">
      </el-table-column>
      <el-table-column
        prop="outNum"
        label="发放单号"
        width="170"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type==0" type="success">政府领取</el-tag>
          <el-tag v-else-if="scope.row.type==1" type="danger">医院领取</el-tag>
          <el-tag v-else-if="scope.row.type==2" type="warning">小区领取</el-tag>
          <el-tag v-else-if="scope.row.type==3" type="info">个人领取</el-tag>
          <el-tag v-else>其它领取</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="priority"
        label="紧急程度"
        width="180">
        <template slot-scope="scope">
          <el-rate
            v-model="scope.row.priority"
            disabled
            text-color="#ff9900"
            show-text
            :texts="['不急','常规','紧急','特急','超急']"
          >
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="发放地点"
        width="200">
      </el-table-column>
      <el-table-column
        prop="productNumber"
        label="总数"
        width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式"
        width="150">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="120">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.status==0"
            style="margin-left: 25px"
            type="success"
            effect="plain">
            已发放
          </el-tag>
          <el-tag
            v-else-if="scope.row.status==1"
            style="margin-left: 25px"
            type="danger"
            effect="plain">
            已回收
          </el-tag>
          <el-tag
            v-else
            style="margin-left: 25px"
            type=""
            effect="plain">
            审核中
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="operator"
        label="操作员"
        width="150">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="发放时间"
        width="150">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small" class="el-icon-thumb">明细</el-button>

          <el-button type="text" size="small" class="el-icon-refresh-left"
                     @click="recycleClick(scope.row.id,scope.row.status,'回收')"
                     v-if="scope.row.status==0">回收站
          </el-button>

          <el-button type="text" size="small" class="el-icon-refresh-left"
                     @click="recycleClick(scope.row.id,scope.row.status,'还原')"
                     v-if="scope.row.status==1">还原
          </el-button>

          <el-popconfirm
            style="margin-left: 10px"
            v-if="scope.row.status==2"
            @onConfirm="updPass(scope.row.id)"
            title="审核通过后库存将更新,是否通过?"
          >
            <el-button slot="reference" type="text" size="small" class="el-icon-right">通过</el-button>
          </el-popconfirm>
          <el-popconfirm
            v-if="scope.row.status!=0"
            @onConfirm="removeByOutstock(scope.row.id)"
            style="margin-left: 10px"
            title="确定删除该订单记录吗？"
          >
            <el-button type="text" size="small" slot="reference" class="el-icon-delete">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      style="margin-top: 20px"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[7, 20, 30, 40]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!--发放明细弹框-->
    <el-dialog
      title="发放明细"
      :visible.sync="dialogVisible"
      width="65%"
      >

      <div style="box-shadow:0px 1px 4px 1px grey">
        <el-row>
          <el-col :span="6">
            <div style="margin-top: 20px;margin-left: 20px">
              <span class="small">省区市：</span>
              <el-tag type="warning">{{user.address}}</el-tag>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="margin-top: 20px">
              <span size="small">具体位置：</span>
              <el-tag type="warning">{{user.address.split('/')[2]}}</el-tag>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="margin-top: 20px">
              <span size="small">联系人：</span>
              <el-tag type="warning">{{user.username}}</el-tag>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="margin-top: 20px;margin-bottom: 20px">
              <span size="small">电话：</span>
              <el-tag type="warning">{{user.userphone}}</el-tag>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--步骤条-->
      <div class="block" style="margin-top: 10px;margin-bottom: 10px" :hidden="buzhou">
        <el-steps :active="step" finish-status="success" simple>
          <el-step title="提交入库单"></el-step>
          <el-step title="审核入库单"></el-step>
          <el-step title="进入库存"></el-step>
        </el-steps>
      </div>
      <!--表格数据-->
      <template>
        <el-table
          :data="detail"
          border
          style="width: 100%;margin-bottom: 60px">
          <el-table-column
            prop="name"
            label="名称"
            width="100">
          </el-table-column>
          <el-table-column
            prop="pnum"
            label="商品编号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="model"
            label="规格">
          </el-table-column>
          <el-table-column
            prop="imageUrl"
            label="图片"
            align="center"
            width="150px"
            padding="0px">
            <template slot-scope="scope">
              <el-image style="width: 30px;height:30px" :src="'https://www.zykhome.club/'+scope.row.imageUrl" />
            </template>
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量"
            width="180">
          </el-table-column>
          <el-table-column
            prop="unit"
            label="单位"
            width="180">
          </el-table-column>

        </el-table>
      </template>

    </el-dialog>
  </div>
</template>
<script>
  import {findByStockPage, updByStatus, removeByOutstock, updByPass,findByPro} from '@/api/stock'

  export default {
    name: "index",
    data() {
      return {
        //弹框头部信息
        user: {
          //省区市
          address: '',
          //具体位置
          juti: '',
          //联系人
          username: '',
          //手机号
          userphone: '',
        },
        //是否隐藏进度条
        buzhou: false,
        //发放明显详情
        detail: [],
        //步骤条
        step: 1,
        //是否禁用弹框
        dialogVisible: false,
        //数据未加载完全时的加载特效
        loading: true,
        //查询条件
        outStockVo: {
          outNum: null,
          status: null,
          type: null
        },
        //数据集合
        tableData: [],
        //当前页
        current: 1,
        //每页最大数
        size: 7,
        //总条数
        total: 0,
      }
    },
    methods: {
      //弹框的表格订单数据
      findPro(num){
        findByPro(num).then(res=>{
          this.detail=res.data
        })
      },
      //通过操作
      updPass(id) {
        updByPass(id).then(res => {
          this.findByPage(this.current, this.size, null);
        }).then(error => {
          console.log("错误信息" + error)
        })
      },
      //订单删除操作
      removeByOutstock(id) {
        removeByOutstock(id).then(res => {
          alert(res.message)
          this.findByPage(this.current, this.size, null);
        }).then(error => {
          console.log("错误信息" + error)
        })
      },
      //回收 还原 操作
      recycleClick(id, status, msg) {
        this.$confirm('此操作将' + msg + '该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var status01 = 1
          if (status == 1) {
            status01 = 0
          } else {
            status01 = 1
          }
          updByStatus(id, status01).then(res => {
            this.$message({
              type: 'success',
              message: msg + '成功!'
            });
            this.findByPage(this.current, this.size, null);
          }).catch(error => {
            console.log("error" + error)
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消' + msg + '回收'
          });
        });
      },
      //重置数据
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //条件查询触发方法
      onSubmit() {
        this.loading = true
        this.findByPage(1, this.size, this.outStockVo);
        console.log('submit!');
      },
      //每页最大条数
      handleSizeChange(val) {
        this.loading = true
        this.findByPage(1, val, this.outStockVo)
        console.log(`每页 ${val} 条`);
      },
      //当前页
      handleCurrentChange(val) {
        this.loading = true
        this.findByPage(val, this.size, this.outStockVo)
        console.log(`当前页: ${val}`);
      },
      handleClick(row) {

        this.user.address = row.address;
        this.user.juti = row.address;
        this.user.username = row.contact;
        this.user.userphone = row.phone;

        this.findPro(row.outNum);

        this.dialogVisible = true
        if (row.status == 0) {
          this.buzhou = false
          this.step = 3
        } else if (row.status == 2) {
          this.buzhou = false
          this.step = 2
        } else {
          this.buzhou = true
        }
        console.log(row);
      },
      findByPage(current, size, outStockVo) {
        var $this = this
        findByStockPage(current, size, outStockVo).then(res => {
          $this.tableData = res.data.outstock
          $this.current = res.data.current
          $this.total = res.data.total
          $this.size = res.data.size
          $this.loading = false
        }).then(error => {
          console.log(error)
        })
      }
    },
    created() {
      this.findByPage(this.current, this.size, null);
    }
  }
</script>

<style scoped>

</style>
